<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<template>
<!--    详情组件-->
    <div class="back" style="position: sticky;top: 0px; z-index: 1;background: white">
        <div style="display: inline-block; float: left;margin-top: 10px" >
            <a @click="back"><h2>&nbsp;&nbsp;&nbsp;&nbsp;&lt;</h2></a>
        </div>
        <div style="display: inline-block;  ">
            <h1 class="title">{{title}}</h1>
        </div>
    </div>
    <div class="bg-image" :style="bkImg" style="background-size: cover">
        <div class="play-btn" v-if="songs.length>0" @click="random">
                <img class="random" src="../assets/icon/randomPlay.png" alt="random">
                <span class="text"><a>&nbsp;随机播放</a></span>
        </div>
    </div>
    <div class="list">
        <songs-list v-if="songs" :songs="songs" @selectIndex="selectItem"></songs-list>
        <div v-if="!songs">
            <br><br>
            <h3>抱歉，没有搜索到相关歌曲</h3>
            <br><br><br><br><br>
        </div>
    </div>



</template>

<script>
import SongsList from "@/components/songsList";
import { mapActions } from 'vuex'
export default {
    name: 'music-list',
    components: {SongsList},
    props: {
        songs: {
            type: Array,
            default() {
                return [];
            },

        },
        title: String,
        pic: String
    },
    computed: {
        bkImg(){
            return{
                background: `url(${this.pic})`,
                opacity: 0.75
            }
        }
    },
    methods:{
        back(){
            this.$router.go(-1)
        },
        selectItem({item,index}){
            this.setSelectPlay({
                list: this.songs,
                index
            })
        },
        random(){
            this.randomPlay(
                this.songs
            )
        },
        ...mapActions([
            'setSelectPlay',
            'randomPlay'
        ]),

    }
}

</script>

<style scoped>
.bg-image{
    width: 100%;
    height: 500px;
}
.list{
    margin-top: 30px;
}
a{
    cursor: pointer;
}
.title,h2{
    color: #000;
}

.play-btn{
    border-radius: 40px/50px;
    background: #a6e1ec;
    padding: 20px;
    width: 150px;
    height: 18px;
    position: absolute;
    top: 480px;
    left: 250px;
}
.title{
    position: center;
}

.random{
    height: 25px;
    padding-left: 34px;
    float: left;
}
.text{
    float: left;
}
</style>
